<template>
  <div id="app">
    <button @click="addFun">添加</button>
    <button @click="delFun">删除</button>
    <!-- index -->
    <!-- 列表过渡 -->
    <!-- transition-group:默认渲染成span
    tag:渲染设定的标签
     -->
    <transition-group tag="div" name="mao">
      <span v-for="item in arr" :key="item">{{ item }}</span>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      arr: [1, 2, 3, 4, 5],
      count: 6,
    };
  },
  methods: {
    randomIndex() {
      return Math.floor(Math.random() * this.arr.length);
    },
    addFun() {
      this.arr.splice(this.randomIndex(), 0, this.count++);
    },
    delFun() {
      this.arr.splice(this.randomIndex(), 1);
    },
  },
  mounted() {},
};
</script>

<style>
span {
  margin-right: 5px;
  /* 行内元素不可以过渡 */
  display: inline-block;
}
/* 整个阶段过渡 */
.mao-enter-active,
.mao-leave-active {
  transition: all 1s;
}
/* 刚进入及完全离开 */
.mao-enter,
.mao-leave-to {
  opacity: 0;
  transform: translateY(50px);
}
</style>
